import { useFoodStore, addOneFish, removeOneFish, removeAllFish } from "../stores/foodStore";

export const FoodBox = () => {
  const { fish, /*addOneFish, removeOneFish, removeAllFish*/ } = useFoodStore();
  const addFiveFish = () => {
    useFoodStore.setState((state) => ({fish: state.fish + 5}))
  }
  const nonReactiveFish = useFoodStore.getState((state) => state.fish) // non-reactive

  return (
    <div className="box">
      <h1>Food Box</h1>
      <p>fish: {fish}</p>
      <div>
      <button onClick={addOneFish}>add one fish</button>
      <button onClick={removeOneFish}>remove one fish</button>
      <button onClick={removeAllFish}>remove all fish</button>
      <button onClick={addFiveFish}>add five fish</button>
      </div>
    </div>
  );
};
